<template>
    <div class=''>
        <van-nav-bar
        title= "分类"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        />
       <van-tabs v-model="active" @click="see">
            <van-tab v-for="item in menus" :key="item._id" :title="item.name">
                <ul>
                    <li v-for="pro in products" :key="pro._id" @click="godetail(pro._id)">
                        <img :src="pro.coverImg" alt="">
                        <p>{{pro.name}}</p>
                        <p>￥{{pro.price}}</p>
                    </li>
                </ul>
            </van-tab>      
        </van-tabs>
    </div>
</template>

<script>
import { reqproductCategories, productsApi} from "../../api/products";
export default {
    
    components: {},
    data() {
        return {
            menus: [],
             active: 0,
             products: [],
        };
    },
    computed: {},
    watch: {},
    
    methods: {
        onClickLeft() {
            this.$router.push("/home")
        },
           
        async categories(){
            const result = await reqproductCategories();
            console.log(result);
            this.menus = result.data.categories; // 先获取所有的menus以后才能初始化显示数据
            // 初始化展示数据
            const res = await productsApi(this.menus[0].name);
            this.products = res.data.products;
  
        },
        async see(name, title){
            console.log(name, title)
            const result = await productsApi(title);
            console.log(result);
            this.products = result.data.products;
        },
        godetail(id){
            this.$router.push("/detail/" + id)
        }
        
    },
    created() {
        
        this.categories();
    },
    mounted() {
        
    },
    }
</script>
<style scoped>
   li{
       /* background: pink; */
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       
   }
    ul li img{
        width: 100%;
    }
    ul {
        margin-bottom: 50px;
    }


</style>